﻿@page "/docs/usage/material"

<Seo Canonical="/docs/usage/material" Title="Blazorise Material Usage" Description="Learn all the steps on how to quickly install and setup Blazorise for Material CSS framework and Material icons." />

<DocsPageTitle Path="Usage/Material">
    Blazorise Material Usage
</DocsPageTitle>

<DocsPageLead>
    Quickly install Blazorise with Material, one of the world's most popular Blazor UI framework.
</DocsPageLead>

<DocsPageParagraph>
    <Alert Color="Color.Info" Visible>
        <AlertDescription>
            <Strong>Note:</Strong> Before proceeding, ensure you have already created a Blazor project. If not, the simplest way to start with Blazorise is by using our <Blazorise.Link To="docs/templates" Title="Link to templates">Templates</Blazorise.Link>.
        </AlertDescription>
    </Alert>
</DocsPageParagraph>

<DocsPageParagraph>
    Since Material CSS is based on a Bootstrap you only need to change the CSS and JS sources. The code in
    <Strong><Badge Color="Color.Light">_Imports.razor</Badge></Strong> will stay the same as for the <Blazorise.Link To="docs/usage/bootstrap4">Bootstrap provider</Blazorise.Link>.
</DocsPageParagraph>

<DocsPageParagraph>
    <GuideSeeTheDemo Provider="CssProvider.Material" />
</DocsPageParagraph>

<DocsPageSubtitle>
    Install Packages
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader>
        First step is to install a Material provider for Blazorise:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideNuget1Example" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader>
        You also need to install the icon package:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideNuget2Example" />
</DocsPageSection>

<DocsPageSubtitle>
    Add Material CSS
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader>
        Material CSS is not available through the CDN so you must download it yourself from <Blazorise.Link To="https://djibe.github.io/material/" Target="Target.Blank">djibe</Blazorise.Link> web page.
        After the download is finished you must extract the CSS and JS to the <Strong>wwwroot</Strong> folder inside of you Blazor project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideFileStructureExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Add Static Files
</DocsPageSubtitle>

<DocsPageParagraph>
    Modify your project's HTML template to include the necessary CSS files. The files you add depend on whether you're working with a WebAssembly or Server project:
</DocsPageParagraph>

<DocsPageParagraph>
    <DocsPageUnorderedList>
        <DocsPageUnorderedListItem>
            For <Strong>WebAssembly</Strong>, update <Strong>index.html</Strong>.
        </DocsPageUnorderedListItem>
        <DocsPageUnorderedListItem>
            For <Strong>Server</Strong>, update <Strong>_Layout.cshtml</Strong> or <Strong>_Host.cshtml</Strong>.
        </DocsPageUnorderedListItem>
        <DocsPageUnorderedListItem>
            For <Strong>.NET 8</Strong>, update <Strong>App.razor</Strong>.
        </DocsPageUnorderedListItem>
    </DocsPageUnorderedList>
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader>
        Add these lines inside the <Code Tag>head</Code> section:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideSourceFilesExample" />
</DocsPageSection>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        <Strong>Note:</Strong> Don't forget to remove bootstrap JS and CSS files that comes with the default Blazor project template.
    </AlertDescription>
</Alert>

<DocsPageSubtitle>
    Add Imports
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader>
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideUsingExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Register Services
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader>
        Add the following lines to the relevant sections of <Code>Program.cs</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MaterialGuideRegistrationExample" />
</DocsPageSection>

<DocsPageSubtitle>
    PWA & Offline Support (optional)
</DocsPageSubtitle>

<DocsPageParagraph>
    For information about PWAs & offline support, please take a look at our <Blazorise.Link To="docs/pwa">PWA docs.</Blazorise.Link>
</DocsPageParagraph>